<template>
  <view>
    <base-container style="padding: 0!important;">
      <view style="padding: 20rpx">
        <uni-forms ref="form" :border="true" :model="form" label-width="150">

          <uni-forms-item
              :rules="[{ required: true, errorMessage: '不能为空' }, { pattern: /^\d{1,8}\.?\d{0,2}$/, errorMessage: '格式不正确' }]"
              label="行驶公里数"
              name="drivenMileage" required>
            <uni-easyinput disabled v-model="form.drivenMileage" :input-border="false" placeholder="请输入"
                           type="number" :styles="{ disableColor: '#fff', color: '#666666'}">
              <template #right>km</template>
            </uni-easyinput>
          </uni-forms-item>

          <uni-forms-item
              :rules="[{ required: true, errorMessage: '不能为空' }, { pattern: /^\d{1,8}$/, errorMessage: '格式不正确' }]"
              label="实收点数"
              name="actualReceivedPoints" required>
            <uni-easyinput disabled v-model="form.actualReceivedPoints" :input-border="false" placeholder="请输入"
                           type="number" :styles="{ disableColor: '#fff', color: '#666666'}">
            </uni-easyinput>
          </uni-forms-item>
          <uni-forms-item
              :rules="[{ required: true, errorMessage: '不能为空' }, { pattern: /^\d{1,8}\.?\d{0,2}$/, errorMessage: '格式不正确' }]"
              label="联单重量"
              name="orderWeight" required>
            <uni-easyinput disabled v-model="form.orderWeight" :input-border="false" placeholder="请输入"
                           type="number" :styles="{ disableColor: '#fff', color: '#666666'}">
              <template #right>kg</template>
            </uni-easyinput>
          </uni-forms-item>
          <uni-forms-item label="加油升数"
                          name="refuelingLiters">
            <uni-easyinput v-model="form.refuelingLiters" :input-border="false" placeholder="请输入"
                           type="number">
              <template #right>L</template>
            </uni-easyinput>
          </uni-forms-item>
          <uni-forms-item name="refuelingImages">
            <base-images v-model="form.refuelingImages" :limit="3" title="加油照片"></base-images>
          </uni-forms-item>
          <uni-forms-item label="备注" name="remark">
            <uni-easyinput v-model="form.remark" :input-border="false" maxlength="400" placeholder="请输入" type="textarea"/>
          </uni-forms-item>
        </uni-forms>
      </view>
	  <view class="flexmid" style="position: fixed; bottom: 50rpx; left: 0; width: 100%;">
	    <!-- <button class="main-btn" @click="submit()">确认出车</button> -->
	    <view class="main-btn middle" @click="submit()">提交</view>
	  </view>
      <!-- <template #actions>
        <button class="main-btn" type="primary" @click="submit">提交</button>
      </template> -->
    </base-container>
  </view>
</template>

<script>
import {TaskPlanApi as Api} from "@/comms/api/taskPlanApi";
import {Msg, toBack} from "@/utils/BaseUtils";

export default {
  data() {
    return {
      params: {},
      form: {},
      driverList: [],
      loUnPersonnelList: [],
      vehicleList: []
    };
  },
  onLoad(params) {
    this.params = params;
  },
  mounted() {
    this.loadDate(this.params)
  },
  methods: {
    async loadDate({id}) {
      Msg.loading(async close => {
        if (id) {
          await Api.completeTaskDefaultData({id}).then(({data}) => this.form = {...data })
        }
        // 判断必填项 如果为空则设置为0 
        const { drivenMileage, actualReceivedPoints, orderWeight } = this.form;
        this.form.drivenMileage = drivenMileage ? drivenMileage : 0;
        this.form.actualReceivedPoints = actualReceivedPoints ? actualReceivedPoints : 0;
        this.form.orderWeight = orderWeight ? orderWeight : 0;
        close?.();
      })
    },

    submit() {
      Msg.loading(close => {
        this.$refs.form.validate().then(async (valid) => {
          Api.completeTask(this.convert())
              .then(res => {
                Msg.success("保存成功")
                uni.$emit('taskIndexReload')
                uni.$emit('tasksJhdxqJhdxq')
                setTimeout(() => toBack?.(), 1000)
              }).finally(() => close?.())
        }).catch(() => close?.())
      })
    },
    convert() {
      const {form = {}} = this;
      return {
        "id": this.params.id,
        "orderWeight": form.orderWeight,
        "refuelingLiters": form.refuelingLiters,
        "actualReceivedPoints": form.actualReceivedPoints,
        "refuelingImages": form.refuelingImages,
        "drivenMileage": form.drivenMileage,
        "remark": form.remark
      }
    }
  }
}
</script>

<style lang="scss">
.uni-card {
  margin-bottom: 15rpx;
}
.main-btn{
	width: 700rpx;
	height: 100rpx;
	background: #1763fc;
	border-radius: 10rpx;
	font-size: 30rpx;
	color: #fff;
	margin: 0 auto;
}
</style>
